import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import { AtToast } from "taro-ui"
import Report from '../../components/Report'
import PageFooterInfo from '../../components/PageFooterInfo'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,userSex,subtime} from '../../utils/common'

import './personnel_center.less'
import './personnel_detail.less'

import iconCollection from "../../assets/img/icon_03.png";
import iconCollection_on from "../../assets/img/icon_03_on.png";
import ViewPhone from "../../components/ViewPhone";

// 工程人才中心-详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Detail extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    isVip: false,
    info:{},
    isCollection: false,
    isTips: false,
    tipsText: '',
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'人才详情' })
    let id = this.$router.params.id
    if(!id) { getRuntime().navigateBack()}
    this.getInfomationInfos(parseInt(id))
    let userInfo = getRuntime().getUserInfo()
    if(userInfo&&userInfo.agencyLevel>0){ this.setState({isVip: true}) }
    let isCollection = parseInt(this.$router.params.isCollection)
    if(isCollection===1){ this.setState({ isCollection: true }) }
  }

  /*componentDidShow(): void {
    console.log('show')
    this.getInfomationInfos(parseInt(this.$router.params.id))
  }*/

  getInfomationInfos(formId) {
    let { homeStore } = this.props.stores
    homeStore.getInfomationInfos({
      formId,
      callback: res => {
        //console.log(home)
        let isCollection = parseInt(this.$router.params.isCollection) === 1 ? true : toJS(res.isCollection)
        this.setState({
          info: toJS(res),
          isCollection
        })
      }
    })
  }

  toggleCollection(){
    if(!getRuntime().getToken()) {
      Taro.showModal({
        title:'请先进行登录',
        content:'',
        confirmText:'前往登录',
      }).then(res => {
        if(res.confirm){
          getRuntime().navigateTo('/pages/login/login')
        }
      })
      return
    }

    let { userStore } = this.props.stores
    this.setState({
      isCollection: !this.state.isCollection
    }, () => {
      if(this.state.isCollection){
        // 收藏
        userStore.saveUserCollection({
          form: {
            informationsId:parseInt(this.$router.params.id),
            userCollectionType:1
          },
          callback: () => {
           // this.setState({isTips: true, tipsText: '收藏成功~'})
          }
        })
      }else {
        // 取消收藏
        userStore.cancelUserCollection({
          form: {
            id: parseInt(this.$router.params.id),
            userCollectionType: '1',
          },
          callback: () => {
          //  this.setState({isTips: true, tipsText: '取消收藏成功~'})
          }
        })
      }
    })
  }

  render() {
    let { isVip,info,isCollection,isTips,tipsText } = this.state
    return (
      <View className='personnel-detail'>
        <View className='list-07-item'>
          <View className='item-title'>
            <View className='title'>
              {info.positionName}
            </View>
            <View className='address' onClick={this.toggleCollection.bind(this)}>
              {!isCollection&&  <Image  className='icon-collection' src={iconCollection} />}
              {isCollection&&  <Image  className='icon-collection' src={iconCollection_on} />}
              <Text className='name-collection'>收藏</Text>
              <AtToast isOpened={isTips} text={tipsText} />
            </View>
          </View>
          <Text className='op'>{info.monthlyPay}</Text>
          <View className='item-info'>
            <View className='info'>
              <Text className='i'>发布： {subtime(info.creationTime)}</Text>
            </View>
            <View className='btn-view'>
              浏览 {info.numberOfVisits}人
            </View>
          </View>
        </View>
        <View className='interval' />

        <View className='column-title'>
          <Text className='column-name'>基本信息</Text>
        </View>
        <View className='item-lawyer'>
            <View className='line'>
              <Text className='title'>姓名：</Text>
              <Text className='name'>{info.name}</Text>
            </View>
            <View className='line'>
              <Text className='title'>性别：</Text>
              <Text className='name'>{userSex(info.userSex)}</Text>
            </View>
            <View className='line'>
              <Text className='title'>出生日期：</Text>
              <Text className='name'>{info.userBirth}</Text>
            </View>
            <View className='line'>
              <Text className='title'>学历：</Text>
              <Text className='name'>{info.education}</Text>
            </View>
            <View className='line'>
              <Text className='title'>毕业院校：</Text>
              <Text className='name'>{info.graduationSchool}</Text>
            </View>
            <View className='line'>
              <Text className='title'>专业名称：</Text>
              <Text className='name'>{info.professionalName}</Text>
            </View>
            <View className='line'>
              <Text className='title'>职称：</Text>
              <Text className='name'>{info.technicalTitle}</Text>
            </View>
            <View className='line'>
              <Text className='title'>工作年限：</Text>
              <Text className='name'>{info.workYears}年</Text>
            </View>

        </View>
        <View className='interval' />

        <View className='column-title'>
          <Text className='column-name'>求职信息</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>求职类型：</Text>
            <Text className='name'>{info.typeOfJob}</Text>
          </View>
          <View className='line'>
            <Text className='title'>求职职位：</Text>
            <Text className='name'>{info.positionOfJob}</Text>
          </View>
          <View className='line'>
            <Text className='title'>意向地区：</Text>
            <Text className='name'>{info.intentionArea}</Text>
          </View>
          <View className='line'>
            <Text className='title'>期盼薪资：</Text>
            <Text className='name'>{info.monthlyPay}</Text>
          </View>
        </View>
        <View className='interval' />


        <View className='column-title'>
          <Text className='column-name'>执业信息</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>执业资格：</Text>
            <Text className='name'>{info.qualification}</Text>
          </View>
          <View className='line'>
            <Text className='title'>注册情况：</Text>
            <Text className='name'>{info.registration}</Text>
          </View>
          <View className='line'>
            <Text className='title'>开始执业：</Text>
            <Text className='name'>{info.practiceTime}</Text>
          </View>
          <View className='line'>
            <Text className='title'>专业类别：</Text>
            <Text className='name'>{info.professionalCategories}</Text>
          </View>
          <View className='line'>
            <Text className='title'>其他资格：</Text>
            <Text className='name'></Text>
          </View>
        </View>
        <View className='interval' />


        <View className='column-title'>
          <Text className='column-name'>转会要求</Text>
        </View>
        <View className={'item-lawyer-desc'}>
          {info.description}
        </View>
        <View className='interval' />


        <View className='column-title'>
          <Text className='column-name'>工作经历</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>企业名称：</Text>
            <Text className='name'>{info.businessName}</Text>
          </View>
          <View className='line'>
            <Text className='title'>工作职位：</Text>
            <Text className='name'>{info.jobPosition}</Text>
          </View>
          <View className='line'>
            <Text className='title'>开始时间：</Text>
            <Text className='name'>{subtime(info.startDateTime)}</Text>
          </View>
          <View className='line'>
            <Text className='title'>结束时间：</Text>
            <Text className='name'>{subtime(info.endDateTime)}</Text>
          </View>
          <View className='line'>
            <Text className='title'>职位描述：</Text>
            <Text className='name'>{info.experienceExplain}</Text>
          </View>
        </View>
        <View className='interval' />

        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>联系人：</Text>
            {isVip&&<Text className='name'>{info.contactsName}</Text>}
            {!isVip&&<View className='name'>
                <Text>*******</Text>
                <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>联系电话：</Text>
            {isVip&&<Text className='name'>{info.phone}</Text>}
            {!isVip&&<View className='name'>
                <Text>*******</Text>
                <Text className='vip'>(VIP会员可见)</Text>
            </View>}
            { !isVip&& <ViewPhone />}
          </View>
          <View className='line'>
            <Text className='title'>微信号：</Text>
            {isVip&&<Text className='name'>{info.wechatNo}</Text>}
            {!isVip&&<View className='name'>
                <Text>*******</Text>
                <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>QQ号：</Text>
            {isVip&&<Text className='name'>{info.qqNo}</Text>}
            {!isVip&&<View className='name'>
                <Text>*******</Text>
                <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
        </View>
        <View className='interval' />
        <Report />

        <PageFooterInfo />
      </View>
    )
  }
}

export default Detail
